import React, {useRef, useState} from 'react';
import {message, Card} from 'antd';
import {useRequest} from "@@/plugin-request/request";
import { addAgentAccount, merchantList, queryAgentList, uploadAccount } from "@/services/bz/api";
import {
  ProForm, ProFormInstance,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

export default () => {
  const [merchantData, setMerchantData] = useState([]);
  const [agentNameList, setAgentNameList] = useState([]);
  const ref = useRef<ProFormInstance>();

  const handleChange = async (value: string) => {
    await queryAgentList(value).then((response) => {
      console.log(`selected: ${response.code}`);
      setAgentNameList(response.data)
    })
  };
  useRequest(merchantList, {
    onSuccess: (res) => {
      let data = [];
      //将拿到的返回值遍历
      res.list.map(item => {
        data.push({
          label: item.merchantCode,
          value: item.merchantCode
        })
      });
      setMerchantData(data);
      console.log("===", merchantData)
    },
  });
  return (
    <div>
      <Card>
        <h2>新增坐席</h2>
        <ProForm
          title={"新增坐席"}
          formRef={ref}
          onFinish={async (values:API.AddAccountBean) => {
            if (values.merchantCode == undefined) {
              message.error('请选择商户');
              return
            }
            await addAgentAccount(values).then(() => {
              message.success("新增坐席成功");
              ref.current?.resetFields()
            },reason => {
              message.error(reason.data.msg);
            })

          }}
          request={async (data) => {
            console.log("====", data)
            return {};
          }}
        >
          <ProFormSelect
            options={merchantData}
            style={{width: 150}}
            onChange={handleChange}
            width="xs"
            name="merchantCode"
            label="选择商户"
          />
          <ProForm.Group>
            <ProFormText width="md" name="agentCode" label="坐席名称" placeholder="请输入坐席名称"  tooltip="坐席名称不可重复" />

            <ProFormSelect
              options={agentNameList}
              style={{width: 200}}
              width="xs"
              name="agentName"
              label="目前已有商户名称"
              placeholder="无需选择，只提供参考"
              tooltip="需先选择商户"
            />

          </ProForm.Group>
          <ProFormText width="md" name="account" label="账号" placeholder="请输入账号" />
          <ProFormText width="md" name="password" label="密码" placeholder="请输入密码" />
          <ProFormSelect
            options={[
              {
                value: 'admin',
                label: 'Admin',
              },{
                value: 'd-1',
                label: 'D-1',
              },{
                value: 'd0',
                label: 'D0',
              },{
                value: 's1',
                label: 'S1',
              },{
                value: 's2',
                label: 'S2',
              },{
                value: 's3',
                label: 'S3',
              },
            ]}
            style={{width: 150}}
            width="xs"
            name="stage"
            label="选择阶段"
          />

        </ProForm>

      </Card>
    </div>

  )
}
